import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'
import { HomeOutlined, } from '@ant-design/icons';
import { Breadcrumb, Divider, Button, Checkbox, Input, message } from 'antd';
import { Link, } from 'react-router-dom'
import axios from 'axios'
import "./index.less"

export default function Register() {
    const [accountValue, setAccountValue] = useState('');
    const [codeValue, setCodeValue] = useState('');
    const [recodeValue, setRecodeValue] = useState('');
    const [mailValue, setMailValue] = useState('');
    const [checked, setChecked] = useState(false);
    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate()

    const isEmailAvailable = (obj:any)=> {
        let email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if (!email.test(obj)) {
            return false;
        }
        return true;
    }
    const submit = () => {
        if (!checked){
            messageApi.open({
                type: 'error',
                content: '请您先阅读并同意服务条款！',
            });
            return
        }
        if (accountValue && codeValue && mailValue) {
            if (!isEmailAvailable(mailValue)){
                messageApi.open({
                    type: 'error',
                    content: '请输入正确的邮箱！',
                });
                return
            }
            if (codeValue === recodeValue){
                let params: any = {
                    account: accountValue,
                    code: codeValue,
                    mail: mailValue
                }
                axios.post("http://localhost:8080/api/register", params).then((response) => {
                    if (response.status === 200) {
                        messageApi.open({
                            type: 'success',
                            content: '账户注册成功！快去登录吧！',
                        });
                        setAccountValue("")
                        setCodeValue("")
                        setRecodeValue("")
                        setMailValue("")
                        setChecked(false)
                    }
                }).catch((err)=>{
                    messageApi.open({
                        type: 'error',
                        content: err.message,
                    });
                });
            }else{
                messageApi.open({
                    type: 'error',
                    content: '两次密码输入不一致，请检查！',
                });
            }
        } else {
            messageApi.open({
                type: 'error',
                content: '账号、密码、邮箱均不能为空',
            });
        }
    };
    const goLogin = () => {
        navigate('/login', {
            replace: false,
            state: { a: 1, b: 2 }
        })
    };
    return (
        <div className='common'>
            {contextHolder}
            <div className="bread">
                <Breadcrumb separator="" style={{ background: 'none' }}>
                    <Breadcrumb.Item><span><HomeOutlined style={{ marginRight: '5px' }} />您现在的位置</span></Breadcrumb.Item>
                    <Breadcrumb.Separator>：</Breadcrumb.Separator>
                    <Breadcrumb.Item><Link to="/home">首页</Link></Breadcrumb.Item>
                    <Breadcrumb.Separator>{`>`}</Breadcrumb.Separator>
                    <Breadcrumb.Item>品酒会</Breadcrumb.Item>
                    <Breadcrumb.Separator>{`>`}</Breadcrumb.Separator>
                    <Breadcrumb.Item>会员注册</Breadcrumb.Item>
                </Breadcrumb>
                <Divider className='divider' />
            </div>
            <div className="login">
                <div className="login_title">
                    <b>会员注册</b>
                    <span color='login_title_span'>(均为必填项)</span>
                </div>
                <div className="login_content">
                    <div className="login_content_info">
                        <div className="account">
                            <span className='login_content_title'>登录账号：</span>
                            <Input className='login_content_input' value={accountValue}
                                onChange={(e) => setAccountValue(e.target.value)} placeholder="请输入账号" />
                            <span className='login_content_tip'>请输入您的手机或email地址</span>
                        </div>
                        <div className="account">
                            <span className='login_content_title'>密码：</span>
                            <Input className='login_content_input' value={codeValue}
                                onChange={(e) => setCodeValue(e.target.value)} placeholder="请输入密码" />
                            <span className='login_content_tip'>密码请设置为6-16位字母或数字</span>
                        </div>
                        <div className="account">
                            <span className='login_content_title'>确认密码：</span>
                            <Input className='login_content_input' value={recodeValue}
                                onChange={(e) => setRecodeValue(e.target.value)} placeholder="请输入密码" />
                            <span className='login_content_tip'>请重复刚刚输入的密码</span>
                        </div>
                        <div className="account">
                            <span className='login_content_title'>邮箱地址：</span>
                            <Input className='login_content_input' value={mailValue}
                                onChange={(e) => setMailValue(e.target.value)} placeholder="请输入密码" />
                            <span className='login_content_tip'>以便找回密码</span>
                        </div>
                        <div className="account">
                            <span className='login_content_title'></span>
                            <Checkbox onChange={(e) => setChecked(e.target.checked)}>阅读并接收服务条款</Checkbox>
                        </div>
                        <div className="bnts">
                            <Button className='bnt' onClick={submit} style={{ marginRight: "20px" }} type="primary">完成注册</Button>
                            <Button className='bnt' onClick={goLogin} type="primary">立即登录</Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
